<template>
  <div class="home">
    <swipe lazy-render :autoplay="3000">
      <swipe-item v-for="banner in banners" :key="banner.id">
        <img :src="dalImg(banner.coverImage)" />
      </swipe-item>
    </swipe>
    <notice-bar
      left-icon="volume-o"
      text="蛋糕熟了今日上新啦~ 全品类满50元免配送费"
      scrollable
    />
    <grid :column-num="2">
      <grid-item
        v-for="value in categories"
        :key="value.id"
        :icon="dalImg(value.coverImage)"
        :text="value.name"
        :to="{
          name: 'list',
          query: {
            c_id: value.id,
          },
        }"
      />
    </grid>
    <card
      :key="item.id"
      :num="item.amount"
      :price="item.price.toFixed(2)"
      :title="item.name"
      :thumb="dalImg(item.coverImage)"
      @click-thumb="toDetail(item.id)"
      v-for="item in products"
    />
  </div>
</template>
<script setup>
import { Swipe, SwipeItem, NoticeBar, Grid, GridItem, Card } from "vant";
import { ref } from "vue";
import { dalImg } from "../utils/tools";
import { loadBannersAPI } from "../server/banners";
import { useCategory } from "../hooks/get-category";
import { useProduct } from "../hooks/get-products";
import { useRouter } from "vue-router";
const router = useRouter();
const { categories } = useCategory();
const banners = ref([]);
const { products, loadData } = useProduct();
loadBannersAPI().then((res) => {
  banners.value = res.data;
});
// 跳转商品详情页
const toDetail = (id) => {
  router.push({
    name: "detail",
    query: {
      id,
    },
  });
};
loadData();
</script>
